<template>
  <div class="content">
    <ul class="top-ul">
      <li id="noGet" class="active" @click="choose1">未领用</li>
      <li id="yesGet" @click="choose2">已领用</li>
    </ul>

    <ul class="state" v-show="showState">
      <li id="no" @click="noUse" class="active2">未使用</li>
      <li id="has"  @click="hasUse">已使用</li>
      <li id="over" @click="overUse" >已过期</li>
    </ul>

    <ul class="c-list">
      <li>
        <div class="get-c-l">
          <span class="left-tip">新人-白酒券</span>
          <div class="coupon-c">
                <span class="coupon-money">
                  <b>¥</b>29
                  </span>
            <span class="coupon-desc">
                  <b class="f5 fz16">满109元减29</b>
                  <b class="f7 fz12 mt2">每个ID每天可领取6张 </b>
                </span>
          </div>
          <p class="coupon-time">使用时间：2018/04/22-2018/05/22</p>
        </div>
        <div class="get-c-r">
          <span>已抢80%</span>
          <span >立即领取</span>
        </div>
      </li>
      <li>
        <div class="get-c-l">
          <span class="left-tip2">新人-白酒券</span>
          <div class="coupon-c">
                <span class="coupon-money2">
                  <b>¥</b>29
                  </span>
            <span class="coupon-desc">
                  <b class="f5 fz16 mt5">满109元减29</b>
                </span>
          </div>
          <p class="coupon-time">使用时间：2018/04/22-2018/05/22</p>
        </div>
        <div class="get-c-r2">
          <span><img src="./images/over.svg" alt=""></span>
        </div>
      </li>
      <li>
        <div class="get-c-l">
          <span class="left-tip2">新人-白酒券</span>
          <div class="coupon-c">
                <span class="coupon-money2">
                  <b>¥</b>29
                  </span>
            <span class="coupon-desc">
                  <b class="f5 fz16 mt5">满109元减29</b>
                </span>
          </div>
          <p class="coupon-time">使用时间：2018/04/22-2018/05/22</p>
        </div>
        <div class="get-c-r2">
          <span><img src="./images/hasget.svg" alt=""></span>
        </div>
      </li>
      <li>
        <div class="get-c-l">
          <span class="left-tip">新人-白酒券</span>
          <div class="coupon-c">
                <span class="coupon-money">
                  <b>¥</b>29
                  </span>
            <span class="coupon-desc">
                  <b class="f5 fz16 mt5">满109元减29</b>
                  <!--<b class="f7 fz12 mt2">每个ID每天可领取6张 </b>-->
                </span>
          </div>
          <p class="coupon-time">使用时间：2018/04/22-2018/05/22</p>
        </div>
        <div class="get-c-r">
          <img src="./images/yhq-bg.svg" class="use-img">
          <span >立即使用</span>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    components: {},
    data(){
      return {
          showState:false
      };
    },
    mounted(){

    },
    methods: {
      noUse(){
        document.getElementById('no').className='active2';
        document.getElementById('has').className='';
        document.getElementById('over').className='';
      } ,
      hasUse(){
        document.getElementById('no').className='';
        document.getElementById('has').className='active2';
        document.getElementById('over').className='';
      } ,
      overUse(){
        document.getElementById('no').className='';
        document.getElementById('has').className='';
        document.getElementById('over').className='active2';
      } ,

      choose1(){
          this.showState = false;
        document.getElementById('noGet').className='active';
        document.getElementById('yesGet').className='';
      },
      choose2(){
        this.showState = true;
          document.getElementById('noGet').className='';
          document.getElementById('yesGet').className='active';
      }
    },
    filters: {}
  }
</script>

<style scoped>
  .content {
    text-align: left;
  }

  .top-ul{
    background: #fff;
    overflow: hidden;
    text-align: center;
  }
  .top-ul li{
    float: left;
    width: 50%;
    padding: .5rem;
    font-size: .75rem;
    color: #777;
  }
  .top-ul .active{
    color: #F74C4E;
    border-bottom: 2px solid #F74C4E;
  }

  .state{
    overflow: hidden;
    padding: .75rem .75rem 0;
  }
  .state li{
    font-size: .65rem;
    color: #555555;
    text-align: center;
    float: left;
    width: calc(33.33% - .5rem);
    background: #fff;
    border: 1px solid #E7E7E7;
    border-radius: 100px;
    margin-right: .75rem;
    padding: .25rem 0;
  }
  .state li:last-child{
    margin-right: 0;
  }

  .state .active2{
    color: #fff;
    background: #E93B3D;
    border: 1px solid #E93B3D;
  }


  .c-list{
    /*height:calc(100% - 2.5rem);*/
    overflow-x:hidden;
    overflow-y:auto;
  }
  .c-list li{
    width:92%;
    height:6rem;
    margin:.75rem auto ;
    overflow:hidden;
    display:table;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(221,221,221,0.50);
    border-radius: 6px;

  }
  .get-c-l{
    display:table-cell;
    width:72%;
    text-align:left;
    font-size:.7rem;
    position:relative;
  }
  .get-c-r{
    display:table-cell;
    width:28%;
    text-align:center;
    vertical-align:middle;
    background-color:#EE5C5C;
    position:relative;
    border-left:1px dashed #fff;
  }

  .get-c-r2{
    display:table-cell;
    width:28%;
    text-align:center;
    vertical-align:middle;
    background-color:#ddd;
    position:relative;
    border-left:1px dashed #fff;
  }

  .get-c-r span:first-child{
    display:inline-block;
    font-size:.65rem;
    color: #fff;
    line-height:1;
    margin-bottom: .5rem;
  }
  .get-c-r span:last-child{
    display:inline-block;
    border-radius:1rem;
    padding:.25rem .5rem;
    font-size:.65rem;
    color: #EE5C5C;
    line-height:1;
    background: #fff;
  }
  .get-c-r:before{
    content:'';
    width:12px;
    height:12px;
    border-radius:100%;
    background-color:#eee;
    position:absolute;
    top:-6px;
    left:-6px;
    z-index:2;

  }
  .get-c-r:after{
    content:'';
    width:12px;
    height:12px;
    border-radius:100%;
    background-color:#eee;
    position:absolute;
    bottom:-6px;
    left:-6px;
    z-index:2;
  }

  .get-c-r2:before{
    content:'';
    width:12px;
    height:12px;
    border-radius:100%;
    background-color:#eee;
    position:absolute;
    top:-6px;
    left:-6px;
    z-index:2;

  }
  .get-c-r2:after{
    content:'';
    width:12px;
    height:12px;
    border-radius:100%;
    background-color:#eee;
    position:absolute;
    bottom:-6px;
    left:-6px;
    z-index:2;
  }
  .get-c-l p{
    margin-bottom:.2rem;
  }
  .fz12{ font-size:.6rem; }
  .fz16{ font-size:.8rem; }
  .f5{
    color:#555;
  }
  .f7{ color:#777; }
  .left-tip{
    position:absolute;
    left: 0;
    top: 0;
    font-size: 11px;
    color: #FFFFFF;
    background: #FF9898;
    border-radius: 6px 0 100px 0;
    display:inline-block;
    padding:.2rem .7rem .2rem .5rem;
  }

  .left-tip2{
    position:absolute;
    left: 0;
    top: 0;
    font-size: 11px;
    color: #777;
    background: #e1e1e1;
    border-radius: 6px 0 100px 0;
    display:inline-block;
    padding:.2rem .7rem .2rem .5rem;
  }
  .coupon-c{
    padding:1.7rem .5rem .5rem;
    overflow:hidden;
  }
  .coupon-money{
     font-size: 2rem;
     color: #E93B3D;
     float:left;
   }
  .coupon-money b{
    font-size:.5rem;
    margin-right:.2rem;
  }

  .coupon-money2{
    font-size: 2rem;
    color: #333;
    float:left;
  }
  .coupon-money2 b{
    font-size:.5rem;
    margin-right:.2rem;
  }
  .coupon-desc{
    float:left;
    padding-top:.3rem;
    padding-left:.5rem;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }
  .coupon-desc b{
    display:block;
    font-weight:normal;
    /*line-height:1.6;*/
  }
  .coupon-time{
    padding-left:.5rem;
    font-size:.5rem;
    color: #777777;
  }
  .mt2{ margin-top:.1rem;}
  .mt5{ margin-top:.5rem;}
.use-img{
  position:absolute;
  right: 0;
  top: 0;
}

</style>
